<script setup lang="ts">
  // import { watch, ref } from 'vue';
  // import { useIntervalFn } from '@vueuse/core';
  import { TableColumn } from '@arco-design/web-vue';
  import { useIntervalFn } from '@vueuse/core';
  import { onMounted, ref } from 'vue';

  const props = defineProps<{
    data: any[];
    columns: TableColumn[];
    height: number;
  }>();

  const scroll = {
    y: props.height,
  };

  const { pause, resume, isActive } = useIntervalFn(
    () => {
      sc();
    },
    1000,
    { immediate: false }
  );

  // watch(
  //   () => props.data,
  //   (newVal) => {
  //     if (newVal && newVal.length > 0) {
  //       resume();
  //     } else {
  //       pause();
  //     }
  //   },
  //   {
  //     immediate: true,
  //   }
  // );

  const tableWrapper = ref();

  const listRef = ref<HTMLDivElement>();

  const tableBodyList = ref<HTMLTableElement>();

  const currentIndex = ref(0);

  function init() {
    // eslint-disable-next-line prefer-destructuring
    listRef.value = tableWrapper.value.querySelectorAll(
      'div.arco-scrollbar-container.arco-table-body'
    )[0];

    // eslint-disable-next-line prefer-destructuring
    tableBodyList.value = listRef.value!.querySelectorAll('tbody')[0] as any;
  }

  function sc() {
    const { rows } = tableBodyList!.value!;
    const len = rows.length;

    const top = rows.item(currentIndex.value!)!.offsetTop;

    listRef.value?.scrollTo({
      top,
      behavior: 'smooth', // 平滑滚动
    });

    if (currentIndex.value >= len - 10) {
      currentIndex.value = 0;
      listRef.value?.scrollTo({
        top: 0,
        behavior: 'instant', // 平滑滚动
      });
    } else {
      currentIndex.value += 1;
    }
  }

  onMounted(() => {
    init();
    resume();
  });
</script>

<template>
  <div ref="tableWrapper" class="table-wrapper">
    <a-table
      :columns="columns"
      :data="data"
      :bordered="{ cell: true }"
      :pagination="false"
      :scroll="scroll"
      :scrollbar="true"
    />
  </div>
</template>

<style lang="less">
  .table-wrapper {
    .arco-table {
      table-layout: fixed;
      width: 100%;
      color: #f5f5f5;
      font-size: 12px;
      border-color: #0376ae !important;

      .arco-table-body {
        background-color: transparent !important;
      }

      .arco-table-th-title,
      .arco-table-td-content {
        font-size: 12px;
      }

      .arco-table-container {
        border-color: #0376ae !important;
      }

      .arco-table-element {
        border-color: #0376ae !important;
      }

      .arco-table-th {
        background: #0a2f66 !important;
      }

      .arco-table-td {
        background: transparent !important;
      }

      .arco-table-th,
      .arco-table-td {
        color: #f5f5f5;
        border-color: #0376ae;
        line-height: 1;
      }

      tr td {
        padding: 0 0;
        color: #f5f5f5;
      }

      .warning-text {
        color: red;
      }
    }
  }
</style>
